import React from 'react';
import { Form, Input, Button, Select, Row, Col, TreeSelect } from 'antd';
import PageTopFormContent from '@/components/PageTopFormContent';
import useOrgTreeSelect from '@/hooks/useOrgTreeSelect';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const { Option } = Select;

const TopQueryForm = ({ form, submit, reset }) => {
  // 获取组织树的自定义钩子
  const [treeData, handleTreeDataLoad] = useOrgTreeSelect();

  return (
    <PageTopFormContent
      title="岗位列表管理"
      content={(
        <Form {...layout} form={form} name="advanced_search">
          <Row gutter={[32, 16]}>
            <Col className="gutter-row" span={6}>
              <Form.Item name="keyName" label="岗位名称">
                <Input placeholder="请输岗位名称" />
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item name="isPrimary" label="岗位标识">
                <Select
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  placeholder="请选择岗位标识"
                  allowClear
                >
                  <Option value={1}>主岗</Option>
                  <Option value={0}>非主岗</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item name="orgId" label="组织">
                <TreeSelect
                  loadData={handleTreeDataLoad}
                  treeData={treeData}
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  placeholder="请选择组织"
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item wrapperCol={{ ...layout.wrapperCol }}>
                <Button type="primary" onClick={submit}>
                  查询
                </Button>
                <Button style={{ marginLeft: 16 }} onClick={reset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      )}
    />
  );
};

export default TopQueryForm;
